<template>
  <div>
    <h1>【aty-progress】 component demo</h1>
    <p>【aty-progress】 本质</p>
    <aty-row class="fd-progress-box">
      <aty-row>
        <aty-title level="4">1.【aty-progress】 default 基础 </aty-title>
        <aty-progress :percent="25" />
        <aty-progress :percent="45" status="active" />
        <aty-progress :percent="65" status="wrong" />
        <aty-progress :percent="100" />
        <aty-progress :percent="25" hide-info />
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-progress】 配合外部组件使用  </aty-title>
        <aty-progress :percent="percent" />
        <aty-button-group size="large">
          <aty-button icon="ios-plus-empty" @click="add" />
          <aty-button icon="ios-minus-empty" @click="minus" />
        </aty-button-group>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-progress】 自定义更多样式  </aty-title>
        <aty-progress :percent="25" :stroke-width="5" />
        <aty-progress :percent="100">
          <aty-icon type="checkmark-circled" />
          <aty-text>成功</aty-text>
        </aty-progress>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-progress】 渐变色  </aty-title>
        <aty-progress :percent="25"  strokeColor="to right, red , blue"/>
        <aty-progress :percent="100" strokeColor="to right, #108ee9 , #87d068">
          <aty-icon type="checkmark-circled" />
          <aty-text>成功</aty-text>
        </aty-progress>
        <aty-panel style="height:300px">
          <aty-progress :percent="100" :vertical="true" strokeColor="to top, red , blue"></aty-progress> 
          <aty-progress :percent="50" :vertical="true" strokeColor="to top, rgba(255,0,0,0), rgba(255,0,0,1)"></aty-progress> 
          <aty-progress :percent="percent" :hide-info="true" :vertical="true" strokeColor="to top, rgba(255,0,0,0), rgba(255,0,0,1)"></aty-progress>
        </aty-panel>
        <aty-progress :percent="percent" strokeColor="to right, rgba(255,0,0,0), rgba(255,0,0,1)"/>
        <aty-button-group size="large">
          <aty-button icon="ios-plus-empty" @click="add" />
          <aty-button icon="ios-minus-empty" @click="minus" />
        </aty-button-group>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-progress】 模拟实时动态 {{percent2}}  </aty-title>
        <aty-button icon="ios-plus-empty" @click="began" text="began"/>
        <aty-button icon="ios-plus-empty" @click="stop" text="stop"/>
        <aty-progress :percent="percent2"  strokeColor="to right, rgba(255,0,0,0), rgba(255,0,0,1)"/>
      </aty-row>

    </aty-row>

  </div>
</template>
<script>
export default {
  data () {
    return {
      percent: 10,
      percent2: 0
    }
  },
  methods: {
    add () {
      if (this.percent >= 100) {
        return false
      }
      this.percent += 10
    },
    minus () {
      if (this.percent <= 0) {
        return false
      }
      this.percent -= 10
    },
    began () {
      this.percent2 = 0
      this.timer()
    },
    stop () {
      this.percent2 = 0
      clearInterval(this.timer())
    },
    timer () {
      let timer = setInterval(() => {
        this.percent2 += 1
        if (this.percent2 >= 100) {
          this.percent2 = 100
          clearInterval(timer)
        }
      }, 50)
      return timer
    }
  }
  //  components: { Alert, Icon }
}
</script>
<style   lang="less"  type="text/less" >
    /*出错*/
    .fd-progress-box {
        padding: 20px;
        text-align:left;
    }
</style>
